import React, { useEffect, useState } from 'react'
import styles from './Home_Fujin.module.css'
import instance from '../http/instance'
export default function Home_Fujin() {
    const [userLocation, setUserLocation] = useState({}); // 用户当前位置
    const [nearbyPeople, setNearbyPeople] = useState([]); // 附近人的信息
    useEffect(() => {
        if (navigator.geolocation) { // 判断浏览器是否支持获取地理位置
            if ("geolocation" in navigator) { // 判断是否支持 HTML5 地理定位 API
                navigator.geolocation.getCurrentPosition(function (position) { // 获取当前位置信息函数
                    console.log('获取位置信息成功：', position);
                    const { latitude, longitude } = position.coords; // 获取经度和纬度
                    setUserLocation({ latitude, longitude }); //保存经纬度
                    // 发送位置信息到服务器
                    instance.post('nearby_people', { latitude, longitude })
                        .then((response) => { // 处理响应数据
                            setNearbyPeople(response.data); // 保存附近的人信息
                        })
                        .catch((error) => { // 处理错误
                            console.log('Error sending location:', error);
                        });
                }, function (error) { // 获取当前位置的错误处理函数
                    console.log(`获取位置信息出错：${error.message}`);
                });
            } else { // 如果不支持 HTML5 地理定位 API返回的错误信息
                console.log("您的浏览器不支持地理定位功能");
            }
        } else { // 浏览器不支持获取地理位置的错误信息
            console.log('Geolocation is not supported by this browser.');
        }
    }, []);
    return (
        <div>
            {nearbyPeople.map((person) => (
                <div key={person._id}>
                    <p>{person.name}</p>
                    {/* 展示其他用户信息 */}
                </div>
            ))}
        </div>
    )
}
